<template>
	<div class="index">
		<!-- <div class="box">
			<span class="tip">文字扫光效果</span>
		</div> -->
		<TextSwept text="文字扫光效果" />
		<!-- <ShoppingCart :Roles="Roles" /> -->
		<ShoppingCart />
		<DynamicallyUpdateViews />
		<div class="pasBox">
			<div class="pareBox">
				<h4>父盒子收到的值</h4>
				<input type="text" v-model.lazy="parentMessage" />
				<button @click="sendTochild">send</button>
				<ul>
					<li
						v-for="(message, index) in childrenMessage"
						:key="message + index"
					>
						{{ message }}
					</li>
				</ul>
			</div>
			<PassingValue
				:parentMessage="parentMessage"
				@messageFromChild="getFromChild"
			/>
			<BrotherValue />
		</div>
	</div>
</template>

<script>
import localstorages from '@/store/localstorages';
import ShoppingCart from '../../components/Shopping_Cart/index.vue';
import DynamicallyUpdateViews from '../../components/DynamicallyUpdateViews/index.vue';
import PassingValue from './components/PassingValue.vue';
import BrotherValue from './components/BrotherValue.vue';
import TextSwept from '@/components/TextSwept/TextSwept.vue';

export default {
	name: 'HomePage',
	components: {
		ShoppingCart,
		DynamicallyUpdateViews,
		PassingValue,
		BrotherValue,
		TextSwept,
	},
	data() {
		return {
			a: [1, 2, 3, { c: 4, d: 5 }],
			Roles: [],
			parentMessage: '',
			childrenMessage: [],
			middlewareMessage: '',
		};
	},
	methods: {
		metFunc() {
			let b = this.a.slice();
			b[0] = 10;
			b[3].c = 10;
		},

		// 发送信息给子组件
		sendTochild() {
			this.middlewareMessage = this.parentMessage;
			this.parentMessage = '';
		},

		//  接收子组件传过来的值
		getFromChild(message) {
			message && this.childrenMessage.push(message);
		},
	},
	mounted() {
		this.metFunc();
	},
	created() {
		const res = localstorages.getItem('Role');
		this.Roles = res;
		this.$store.state.roles = res;
		localstorages.setItem('Role', [
			{ name: '胡桃', age: 16, sex: '女', Constellation: 0 },
			{ name: '枫原万叶', age: 17, sex: '男', Constellation: 0 },
			{ name: '神里绫华', age: 18, sex: '女', Constellation: 0 },
			{ name: '雷电将军', age: 19, sex: '女', Constellation: 0 },
			{ name: '优菈', age: 20, sex: '女', Constellation: 0 },
			{ name: '迪卢克', age: 21, sex: '男', Constellation: 0 },
			{ name: '可莉', age: 22, sex: '女', Constellation: 0 },
			{ name: '琴', age: 23, sex: '女', Constellation: 0 },
			{ name: '安柏', age: 24, sex: '女', Constellation: 0 },
			{ name: '诺艾尔', age: 25, sex: '女', Constellation: 0 },
			{ name: '菲谢尔', age: 26, sex: '女', Constellation: 0 },
			{ name: '珊瑚宫心海', age: 27, sex: '女', Constellation: 0 },
			{ name: '七七', age: 28, sex: '女', Constellation: 0 },
			{ name: '罗莎莉亚', age: 29, sex: '女', Constellation: 0 },
			{ name: '芭芭拉', age: 30, sex: '女', Constellation: 0 },
		]);
	},
};
</script>

<style scoped>
.index {
	background-color: #000;
	height: 100%;
}
.pasBox {
	display: flex;
	flex-direction: row;
	gap: 40px;
	margin: 20px;
}
.pareBox {
	width: 200px;
	height: 200px;
	background-color: aqua;
}
</style>
